<template>
    <div class="mt-root">
        <nav-header>
            <p id="one">每天发现更多新鲜有趣的事情</p>
        </nav-header>
        <back-top></back-top>
        <loading v-if="showLoading"></loading>
        <el-carousel height="200px" class="two">
            <el-carousel-item v-for="a in list">
                <img :src=a.img alt="" class="one">
            </el-carousel-item>
        </el-carousel>
        <!--最近新上-->
        <div class="big">
            <p class="p">最近上架</p>
            <div class="shang">
                <div v-for="a in name" class="show">
                    <router-link :to="/more/+a.id+'/'+a.name">
                        <img :src=a.images alt="">
                        <p class="up">{{a.updateInfo}}</p>
                        <div class="aut">
                            <p class="red">{{a.name}}</p>
                            <p class="black"><i class="fa fa-user-o"></i>&#x3000;{{a.author}}</p>
                        </div>
                    </router-link>
                </div>
            </div>
            <!--搞笑-->
            <p class="p">搞笑</p>
            <div class="shang">
                <div v-for="a in gaoxiao" class="show">
                    <router-link :to="/more/+a.id+'/'+a.name">
                        <img :src=a.images alt="">
                        <p class="up">{{a.updateInfo}}</p>
                        <div class="aut">
                            <p class="red">{{a.name}}</p>
                            <p class="black"><i class="fa fa-user-o"></i>&#x3000;{{a.author}}</p>
                        </div>
                    </router-link>
                </div>
            </div>
            <!--搞笑-->
            <p class="p">恋爱</p>
            <div class="shang">
                <div v-for="a in like" class="show">
                    <router-link :to="/more/+a.id+'/'+a.name">
                        <img :src=a.images alt="">
                        <p class="up">{{a.updateInfo}}</p>
                        <div class="aut">
                            <p class="red">{{a.name}}</p>
                            <p class="black"><i class="fa fa-user-o"></i>&#x3000;{{a.author}}</p>
                        </div>
                    </router-link>
                </div>
            </div>
            <!--百合-->
            <p class="p">百合</p>
            <div class="shang">
                <div v-for="a in Yuri" class="show">
                    <router-link :to="/more/+a.id+'/'+a.name">
                        <img :src=a.images alt="">
                        <p class="up">{{a.updateInfo}}</p>
                        <div class="aut">
                            <p class="red">{{a.name}}</p>
                            <p class="black"><i class="fa fa-user-o"></i>&#x3000;{{a.author}}</p>
                        </div>
                    </router-link>
                </div>
            </div>
            <!--恐怖-->
            <p class="p">恐怖</p>
            <div class="shang">
                <div v-for="a in horror" class="show">
                    <router-link :to="/more/+a.id+'/'+a.name">
                        <img :src=a.images alt="">
                        <p class="up">{{a.updateInfo}}</p>
                        <div class="aut">
                            <p class="red">{{a.name}}</p>
                            <p class="black"><i class="fa fa-user-o"></i>&#x3000;{{a.author}}</p>
                        </div>
                    </router-link>
                </div>
            </div>
            <!--冒险-->
            <p class="p">冒险</p>
            <div class="shang">
                <div v-for="a in risk" class="show">
                    <router-link :to="/more/+a.id+'/'+a.name">
                        <img :src=a.images alt="">
                        <p class="up">{{a.updateInfo}}</p>
                        <div class="aut">
                            <p class="red">{{a.name}}</p>
                            <p class="black"><i class="fa fa-user-o"></i>&#x3000;{{a.author}}</p>
                        </div>
                    </router-link>
                </div>
            </div>

        </div>
    </div>
    </div>
</template>
<script>
   import NavHeader from '../commpoents/NavHeader'
 import Loading from '../commpoents/Loading'
 import BackTop from '../commpoents/BackTop.vue'
    export default{
         components:{
         NavHeader,Loading,BackTop
      },
      data(){
            return{
                  list:[
                      {img:'http://f2.kkmh.com/image/161007/9bkpwd8rv.webp-w750.jpg'},
                      {img:'http://f2.kkmh.com/image/161007/gihcg13qj.webp-w750.jpg'},
                      {img:'http://f2.kkmh.com/image/161005/vmgipwisq.webp-w750.jpg'}
                  ],
                  name:[],
                  gaoxiao:[],
                  like:[],
                  Yuri:[],
                  horror:[],
                  risk:[],
                  showLoading:true
              }

      },
      created(){
          this.updata();
          this.jok();
          this.love();
          this.lily();
          this.terror();
          this.adventure();
      },

      methods:{
        //   更新
          updata(){
        this.axios.get('https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=21&page=1&size=6')
           .then(data=>{
                this.name=data.data.results
               setTimeout(() => {
                    this.showLoading = false
                },300)
            })
          .catch(err=>{
              consoel.log(err)
          })
          },
        //   搞笑
          jok(){
              this.axios.get('https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=16&page=1&size=6')
              .then(data=>{
                   this.gaoxiao=data.data.results
            setTimeout(() => {
                    this.showLoading = false
                },300)
              })
              .catch(err=>{
                  console.log(err)
              })
          },
        //   恋爱
          love(){
            this.axios.get('https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=28&page=1&size=6')
              .then(data=>{
                   this.like=data.data.results
            setTimeout(() => {
                    this.showLoading = false
                },300)
              })
              .catch(err=>{
                  console.log(err)
              })
          },
        //   百合
          lily(){
               this.axios.get('https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=25&page=1&size=6')
              .then(data=>{
                   this.Yuri=data.data.results
            setTimeout(() => {
                    this.showLoading = false
                },300)
              })
              .catch(err=>{
                  console.log(err)
              })
          },
        //   恐怖
          terror(){
              this.axios.get('https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=25&page=1&size=6')
              .then(data=>{
                   this.horror=data.data.results
            setTimeout(() => {
                    this.showLoading = false
                },300)
              })
              .catch(err=>{
                  console.log(err)
              })
          },
        //   冒险
          adventure(){
               this.axios.get('https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=1&page=1&size=6')
              .then(data=>{
                   this.risk=data.data.results
             setTimeout(() => {
                    this.showLoading = false
                },300)
              })
              .catch(err=>{
                  console.log(err)
              })
          }

      }
   }
</script>
<style scoped>
    .big {
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    
    .one {
        width: 100%;
        height: 100%;
    }
    
    .el-carousel__item {
        height: 100%;
    }
    
    .two {
        margin-top: 1.5rem;
        height: 80%;
    }
    
    #one {
        font-size: 0.5rem;
        margin-top: 0.4rem;
        margin-bottom: 0.4rem;
    }
    
    .shang {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0.4rem;
        box-sizing: border-box;
        margin-bottom: 1rem;
    }
    
    .show {
        width: 33%;
    }
    
    .show img {
        width: 90%;
        height: 80%;
    }
    
    .p {
        font-size: 0.7rem;
        margin-left: 0.4rem;
    }
    
    .three {
        width: 10%;
        display: inline-block;
        text-align: center;
        position: relative;
        left: 80%;
        border: solid 1px black;
        border-radius: 15px;
        font-size: 0.4rem;
    }
    
    .up {
        position: relative;
        top: -150px;
        color: red;
        font-weight: bolder;
        font-size: 0.4rem;
        transform: rotate(25deg);
    }
    
    .aut {
        position: relative;
        top: -30px;
    }
    
    .red {
        font-weight: bolder;
        position: relative;
        top: 0.2rem;
    }
    
    .black {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 0.4rem;
        position: relative;
        top: 0.2rem;
    }
</style>